<template>
	<view class="popWrap">
		<view class="popTopDec">
			<image class="feedImg" :src="getStaticFilePath('feedBack.png')"></image>
			<view>基本信息登记</view>
		</view>
		<scroll-view class="scrollView" scroll-y>
			<view class="padd">
				<view class="popInfo">
					<view class="infoItem hasFlex"
						v-for="(item,index) in userDetail"
						:key="index"
					>
						<view class="infoTit">{{item.label}}</view>
						<view class="infoCon">
							<block v-if="item.label != '性别'">
								<block v-if="item.label == '手机号码' || item.label == '联系方式'">
									<input class="infoInp" type="tel" v-model="item.value" :disabled="isApplyFlag" maxlength="11" :placeholder="formatPlholder(item.label)" placeholder-style="color:#8789B1;font-weight:normal;"/>
								</block>
								<block v-else>
									<input class="infoInp" type="text" v-model="item.value" :disabled="isApplyFlag" :placeholder="formatPlholder(item.label)" placeholder-style="color:#8789B1;font-weight:normal;"/>
								</block>
							</block>
							<block v-else>
								<block v-if="!isApplyFlag">
									<view class="cirRadItem"
										v-for="(itemSex,indexSex) in sexArr"
										:key="indexSex"
										@tap="selSex(indexSex,item)"
									>
										<view class="cirRadSq"
											:class="[sexIndex == indexSex ? 'active' : '']"
										>
											<view class="cir transp"></view>
										</view>
										<view>{{itemSex}}</view>
									</view>
								</block>
								<block v-else>
									<view class="disEdit">{{item.value}}</view>
								</block>
							</block>
						</view>
					</view>
				</view>
				<view class="popCon">
					<view class="tit">活动信息确认</view>
					<view class="hdDetItem hasFlex">
						<image class="detImg" :src="getStaticFilePath('address.png')"></image>
						<view class="address">地址：复方丹参规范的轮廓更加发开了房间多少</view>
					</view>
					<view class="hdDetItem hasFlex">
						<image class="detImg" :src="getStaticFilePath('sq-time.png')"></image>
						<view><text class="timeTxt">时间：</text><text class="time">2023-12-20</text><text class="till">至</text><text class="time">2023-12-22</text></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<button class="comBtn" :disabled="isDisabledFlag">确认{{applyBtnTit}}</button>
	</view>
</template>

<script>
	export default {
		props:{
			applyBtnTit:String,
			isDisabledFlag:Boolean
		},
		computed:{
			formatPlholder(){
				return function(str){
					return '请输入' + str
				}
			}
		},
		data(){
			return{
				sexArr:['男','女'],
				sexIndex:0,
				userDetail:[{label:'手机号码'},{label:'年龄'},{label:'性别'}],
				isApplyFlag:false
			}
		},
		methods:{
			selSex(indexSex,item){
				this.sexIndex = indexSex;
				item.value = this.sexArr[indexSex];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popWrap{
		background:$sq-fuf;
		padding: 0rpx 0 50rpx;
		border-radius: 24rpx 24rpx 0 0;
	}
	.popTopDec{
		width: 100%;
		height:120rpx;
		background:$sq-fue;
		z-index: 2;
		display:flex;
		border-radius: 24rpx 24rpx 0 0;
		color:#5B4DC3;
		align-items: center;
		font-size: 30rpx;
		font-weight: 600;
		.feedImg{
			width: 46rpx;
			height: 46rpx;
			margin:0 10rpx 0 30rpx;
		}
	}
	.scrollView{
		max-height: 800rpx;
	}
	.popInfo{
		padding: 20rpx 30rpx;
		margin:-10rpx 0 10rpx;
		.infoItem{
			height: 90rpx;
			.infoTit{
				width: 180rpx;
				line-height: 90rpx;
				color: $sq-main0;
				font-weight: 600;
				font-size: 30rpx;
			}
			.infoCon{
				flex:1;
				display: flex;
				.cirRadItem{
					height: 100%;
					display: flex;
					align-items: center;
					margin-right: 50rpx;
					color:$sq-main8;
					font-size: 28rpx;
				}
				.cirRadSq{
					width: 26rpx;
					height: 26rpx;
					border:2rpx solid #8D8EB1;
					border-radius:10rpx;
					margin-right: 10rpx;
					background: $sq-fuf;
					display: flex;
					justify-content: center;
					align-items: center;
					.cir{
						width: 14rpx;
						height: 14rpx;
						background: $sq-fuf;
						border-radius: 4rpx;
					}
					&.active{
						border: 2rpx solid #D9D5F7;
						background: #EEEEFF;
						.cir{
							background: $pss-sq-main;
						}
					}
				}
				.infoInp{
					height: 100%;
					line-height: 90rpx;
					color: $sq-main0;
					font-size: 30rpx;
					font-weight: bold;
					flex: 1;
				}
				.holdInp{
					font-size: 28rpx;
					color: $sq-main0;
					font-weight: normal;
				}
			}
		}
	}
	.popCon{
		background: $sq-fue;
		border-radius: 20rpx;
		border:2rpx solid #D9D5F7 ;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		.tit{
			font-size: 30rpx;
			color: $sq-main0;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.hdDetItem{
			font-size: 26rpx;
			margin-bottom: 15rpx;
			.detImg{
				width: 36rpx;
				height: 36rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
			.address,
			.timeTxt{
				color: $sq-main8;
			}
			.time,
			.till{
				color: $pss-sq-main;
			}
			.till{
				margin: 0 10rpx;
			}
		}
	}
	.comBtn{
		width: 500rpx;
		margin: 50rpx auto 0rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		background: $pss-sq-main;
	}
</style>